<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宠物招领系统 - 宠物匹配</title>
    <!--字体图标-->
    <link rel="stylesheet" th:href="@{/system/css/all.css}">
    <!-- Select2 -->
    <link rel="stylesheet" th:href="@{/system/css/select2.min.css}">
    <!--外观 得放select下面，不然下拉栏会乱-->
    <link rel="stylesheet" th:href="@{/system/css/adminlte.min.css}">
    <!-- Toastr -->
    <link rel="stylesheet" th:href="@{/system/css/toastr.min.css}">
    <style>
        .nav-pills .nav-link.active {
            background-color: #ffc107;
        }

        .nav-pills .nav-link:not(.active):hover {
            color: #ffc107;
        }

        .page-link {
            color: #ffc107;
        }

        .page-link:hover {
            color: #d3a210;
        }

        .page-item.active .page-link {
            color: #fff;
            background-color: #ffc107;
            border-color: #ffc107;
        }

        .post-hover:hover{
            opacity: 0.7;
        }
    </style>
</head>

<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <!--引入头框-->
    <div th:replace="pc/system/header::header-nav"></div>
    <div th:replace="pc/system/header::header-nav-model"></div>
    <!-- 内容 -->
    <div style="width: 100%; margin-top: 20px;">
        <div class="w-100" style="display: flex; justify-content: center">
            <div style="display: flex; align-items: center">
                <h4>您的上传图片：</h4>
            </div>
            <div style="width: 196px; height: 196px">
                <img class="w-100 h-100" id="image" alt="上传图" src="" style="border-radius: 4px">
            </div>
        </div>
        <!-- 排序关键字 -->
        <div style="display: flex; justify-content: center; align-items: center; height: 50px">
            <div style="width:900px;">
                <ul id="sortBox" class="nav nav-pills">
                    <!--<li class="nav-item">
                        <a class="nav-link active" href="#">
                            默认排序
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            最新发布
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            浏览最多
                        </a>
                    </li>-->
                </ul>
            </div>
        </div>
        <!-- 帖子排列 -->
        <div style="display: flex; justify-content: center; margin-top: 10px">
            <div style="width: 900px;">
                <!-- 帖子 -->
                <div id="posts" style="display: flex; flex-wrap: wrap">
                    <!--<div class="card card-danger card-outline" style="width: 216px">
                        <div style="width: 100%; height: 216px; padding: 10px">
                            <img style="width: 100%; height: 100%;" src=""
                                 alt="主图">
                        </div>
                        <div style="width: 100%; padding: 10px">
                            <a href="#" style="color: #000000">
                                <h5>标题标题标题标...</h5>
                                <span style="opacity: 0.5">
                                    <span>津南区 03-09</span>
                                    <span style="color: #ffc107">哈士奇</span>
                                    <span style="color: #dc3545">丢失</span>
                                </span>
                            </a>
                        </div>
                    </div>
                    <div class="card card-danger card-outline" style="width: 216px; margin-left: 12px">
                    </div>-->
                    未找到符合的宠物信息！
                </div>
            </div>
        </div>
        <!-- 底下跳转数字 -->
        <div class="card-footer">
            <nav aria-label="Contacts Page Navigation">
                <ul id="pageBox" class="pagination justify-content-center m-0">
                    <!--<li class="page-item"><a class="page-link" href="#">首页</a></li>
                    <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                    <li class="page-item"><a class="page-link" href="#">末页</a></li>-->
                </ul>
            </nav>
        </div>
        <div style="display: flex; justify-content: center; margin-top: 20px">
            <p>若您未找到符合的宠物信息，请手动筛选。</p>
        </div>
    </div>
</div>

<!-- jQuery -->
<script th:src="@{/system/js/jquery.min.js}"></script>
<!-- Bootstrap 4 -->
<script th:src="@{/system/js/bootstrap.bundle.min.js}"></script>
<!-- Select2 -->
<script th:src="@{/system/js/select2.full.min.js}"></script>
<!-- Bootstrap Switch -->
<script th:src="@{/system/js/bootstrap-switch.min.js}"></script>
<!-- Toastr -->
<script th:src="@{/system/js/toastr.min.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/system/js/adminlte.js}"></script>
<!-- 自己 -->
<script th:src="@{/system/js/header.js}"></script>
<script th:src="@{/system/js/address_category.js}"></script>
<script th:src="@{/system/js/pet_category.js}"></script>
<script th:src="@{/system/js/search.js}"></script>
<!-- 内联js，必须要加th:inline，这是Thymeleaf的写法-->
<script th:inline="javascript">
    /* 上传图 */
    var image = [[${image}]] // 图片url
    $('#image').attr('src', image);

    /* 获取数据 */
    var pageResult = [[${pageResult}]]; // data
    var currentPage = pageResult.currentPage; // 当前页
    var totalPage = pageResult.totalPage; // 总页码
    var postType = [[${postType}]]; // postType
    var sort = [[${sort}]]; // sort
    var petCategoryId = [[${petCategoryId}]]; // petCategoryId
    var addressCategoryId = [[${addressCategoryId}]]; // addressCategoryId

    /* 排序栏 */
    var sortBox = $('#sortBox');
    var urlForSort = '/searchImg?page=1&image=' + image;
    sortBox.empty();
    if (sort === null) {
        createSort(sortBox, '默认排序', true, '#');
        createSort(sortBox, '最新发布', false, urlForSort + '&sort=createTime');
        createSort(sortBox, '浏览最多', false, urlForSort + '&sort=views');
    } else if (sort === 'createTime') {
        createSort(sortBox, '默认排序', false, urlForSort);
        createSort(sortBox, '最新发布', true, '#');
        createSort(sortBox, '浏览最多', false, urlForSort + '&sort=views');
    } else if (sort === 'views') {
        createSort(sortBox, '默认排序', false, urlForSort);
        createSort(sortBox, '最新发布', false, urlForSort + '&sort=createTime');
        createSort(sortBox, '浏览最多', true, '#');
    }

    function createSort(sortBox, content, active, url) {
        let li = $('<li>').addClass('nav-item');
        let a = $('<a>').addClass('nav-link')
            .attr('href', url)
            .text(content);
        if (active) {
            a.addClass('active');
        }
        li.append(a);
        sortBox.append(li);
    }

    /* 帖子显示 */
    if (pageResult.list.length !== 0) {
        var posts = $('#posts');
        posts.empty();
        create(posts, pageResult.list);
    }

    function create(body, data) {
        for (let i = 0; i < data.length; i++) {
            let div = $('<div>').addClass('card card-outline').css('width', '216px');
            if (i !== 0 && i !== 4) {
                div.css('margin-left', '12px')
            }
            let imgDiv = $('<div>').css({'width': '100%', 'height': '216px', 'padding': '10px'});
            let img = $('<img>').css({
                'width': '100%',
                'height': '100%',
                'border-radius': '4px'
            }).attr('src', data[i].mainImageUrl);
            imgDiv.append(img);
            let fontDiv = $('<div>').css({'width': '100%', 'padding': '10px'});
            let a = $('<a>').css('color', '#000000').attr('href', '/post/detail/' + data[i].postId).attr('target', '_blank').addClass("post-hover");
            let h5 = $('<h5>').text(data[i].postTitle);
            let opacitySpan = $('<span>').css('opacity', '0.5');
            let addressAndTimeSpan = $('<span>').text(data[i].addressCategoryName + ' ' + data[i].createTime);
            let categorySpan = $('<span>').css('color', '#ffc107').text(' ' + data[i].petCategoryName);
            let typeSpan = $('<span>').text(' ' + data[i].postTypeName);
            if (data[i].postTypeName === '丢失') {
                div.addClass('card-danger');
                typeSpan.css('color', '#dc3545');
            } else {
                div.addClass('card-info');
                typeSpan.css('color', '#17a2b8');
            }
            opacitySpan.append(addressAndTimeSpan);
            opacitySpan.append(categorySpan);
            opacitySpan.append(typeSpan);
            fontDiv.append(h5);
            fontDiv.append(opacitySpan);
            a.append(imgDiv);
            a.append(fontDiv);
            div.append(a);
            body.append(div);
        }
    }

    /* 底下页码 */
    var urlStr = '/searchImg?image=' + image + ((sort === null) ? '' : ('&sort=' + sort));
    var pageBox = $('#pageBox');
    pageBox.empty();
    if (currentPage === 1) {
        createLi(pageBox, currentPage, '#', true);
        if (currentPage !== totalPage) {
            createLi(pageBox, (currentPage + 1), urlStr + '&page=' + (currentPage + 1), false);
            createLi(pageBox, '下一页', urlStr + '&page=' + (currentPage + 1), false);
            createLi(pageBox, '末页', urlStr + '&page=' + totalPage, false);
        }
    } else if (currentPage < totalPage) {
        createLi(pageBox, '首页', urlStr + '&page=1', false);
        createLi(pageBox, '上一页', urlStr + '&page=' + (currentPage - 1), false);
        createLi(pageBox, (currentPage - 1), urlStr + '&page=' + (currentPage - 1), false);
        createLi(pageBox, currentPage, '#', true);
        createLi(pageBox, (currentPage + 1), urlStr + '&page=' + (currentPage + 1), false);
        createLi(pageBox, '下一页', urlStr + '&page=' + (currentPage + 1), false);
        createLi(pageBox, '末页', urlStr + '&page=' + totalPage, false);
    } else if (currentPage === totalPage) {
        createLi(pageBox, '首页', urlStr + '&page=1', false);
        createLi(pageBox, '上一页', urlStr + '&page=' + (currentPage - 1), false);
        createLi(pageBox, (currentPage - 1), urlStr + '&page=' + (currentPage - 1), false);
        createLi(pageBox, currentPage, '#', true);
    }

    function createLi(pageBox, content, url, active) {
        let li = $('<li>').addClass('page-item');
        let a = $('<a>').addClass('page-link').attr('href', url).text(content);
        li.append(a);
        if (active) {
            li.addClass('active');
        }
        pageBox.append(li);
    }
</script>
</body>
</html>